<template>
  <div>
    <!-- <div class="animate__animated animate__slideInDown"></div> -->
    <!-- 轮播 -->

    <!-- animate  content保持1280-->
    <div class="content">
      <el-carousel indicator-position="outside" :height="'400px'" :interval="5000">
        <el-carousel-item v-for="item in imgList" :key="item">
          <!-- <img class="img" :src="item.url" alt=""> -->
          <div class="div">
            <p class="div-p">{{ item.name }}</p>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="content-header">
        <p class="con-p">技术团队介绍</p>
        <span>我们的技术团队是一支高度专业、富有创造力和热情的团队，致力于提供卓越的技术解决方案。我们的团队由多位经验丰富的技术专家组成，具备广泛的技术知识和技能。</span>
        <p class="con-p">团队成员</p>
        <span>我们的团队成员拥有各种背景和专业知识，包括软件开发、网络安全、数据科学、云计算、人工智能等。他们中的许多人拥有多年的行业经验，并拥有在各种项目中成功交付高质量解决方案的良好记录</span>
        <p class="con-p">专业知识和技能</p>
        <span>
          我们的团队成员熟练掌握多种编程语言和技术框架，包括但不限于Java、Python、C++、JavaScript等。他们精通各种开发工具和平台，并能灵活应用这些技术以满足各种需求。
          此外，我们的团队还具备丰富的数据库管理、系统架构设计、网络安全、大数据处理和机器学习等方面的知识和技能。这使得我们能够提供全面的技术解决方案，满足客户的各种需求。
        </span>
      </div>
      <div class="content-main">
        <div v-for="(item, index) in tabList" :key="index" class="tabItem">
          <div class="con-p animate__animated animate__slideInDown">{{ item.name }}</div>
          <div>
            <i v-if="item.key == 10" class="iconfont icon-haoping tab-i "></i>
            <i v-if="item.key == 20" class="iconfont icon-gaotongguoshuai tab-i"></i>
            <i v-if="item.key == 30" class="iconfont icon-xuexiao_xuesheng tab-i"></i>
          </div>
          <div v-if="item.key == 10">{{ item.count }}%</div>
          <div v-if="item.key == 20">{{ item.count }}份</div>
          <div v-if="item.key == 30">{{ item.count }}人</div>
        </div>
      </div>
      <div class="content-footer">
        <p class="con-p">成果展示</p>
        <!-- 视频展示 -->
        <div class="video-box">
          <wsVideo :videoes="videoes" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref, onMounted } from 'vue'
import wsVideo from '@/components/wangs/ws-video.vue'
/* 轮播 */
const imgList = ref<any>([
  {
    name: '专业服务',
  },
  {
    name: '专业平台',
  },
  {
    name: '专业团队',
  },
  {
    name: '保质保量',
  }
])
/* 选项库 */
const tabList = ref<any>([
  {
    name: '好评率',
    count: 98.6,
    key: 10
  },
  {
    name: '毕设总数',
    count: 5342,
    key: 20
  },
  {
    name: '服务学生人数',
    count: 1232,
    key: 30
  }
])

/* 视频 */
const videoes = ref({
  url: "../../../../src/assets/douyin.mp4",
  path: "https://img2.baidu.com/it/u=3203734762,774649451&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
})


</script>
<style lang='scss' scoped>
.content {
  width: 90vw;
  margin: 30px auto;

  .el-carousel__item {
    width: 100%;

    .img {
      width: 100%;
      height: 100%;
    }

    .div {
      width: 100%;
      height: 100%;
      background: #fff;
      position: relative;

      .div-p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #808080;
        font-size: 35px;
        font-weight: bold;
        font-style: italic;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
      }
    }
  }

  .con-p {
    font-size: 20px;
    font-weight: bold;
    color: #808080;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  }

  .content-header {
    width: 100%;

    span {
      font-size: 14px;
      text-indent: 100px;
    }
  }

  .content-main {
    display: flex;
    width: 100%;
    padding: 100px 0;

    .tabItem {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .tab-i {
        font-size: 30px;
      }
    }
  }

  .content-footer {
    width: 100%;
    padding: 20px 0;

    .con-p {
      text-align: center;
    }

    .video-box {
      width: 30%;
      margin: 50px auto;
    }
  }
}

@media screen and (max-width:600px) {
  .content {
  width: 90vw;
  margin: 30px auto;

  .content-footer {
    width: 100%;
    padding: 20px 0;

    .con-p {
      text-align: center;
    }

    .video-box {
      width: 90%;
      margin: 50px auto;
    }
  }
}
}
</style>
